<template>
  <div class="content-container">
    <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="点检预警设置" width="650px">
      <button-group ref="buttonGroup" @submitForm="submitForm('ruleForm')" @cancel="dialogVisible = false" />
      <div class="formTopFont">点检预警设置</div>
      <el-row>
        <p class="title">
          <span class="titleName">预警级别</span>
          <span class="colorBoxEX red" />
          <i class="el-icon-arrow-right" />
          <span class="colorBoxEX orange" />
          <i class="el-icon-arrow-right" />
          <span class="colorBoxEX yellow" />
        </p>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" size="mini">
          <el-form-item label="剩余时间<" prop="lv1">
            <el-input v-model="ruleForm.lv1">
              <template slot="append">天</template>
            </el-input>
            <span class="colorBox red" />
          </el-form-item>
          <el-form-item label="剩余时间<" prop="lv2">
            <el-input v-model="ruleForm.lv2">
              <template slot="append">天</template>
            </el-input>
            <span class="colorBox orange" />
          </el-form-item>
          <el-form-item label="剩余时间<" prop="lv3">
            <el-input v-model="ruleForm.lv3">
              <template slot="append">天</template>
            </el-input>
            <span class="colorBox yellow" />
          </el-form-item>
        </el-form>
      </el-row>
      <span slot="footer">
        <el-button type="info" size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button size="mini" @click="submitForm('ruleForm')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    /**
     * @description:  剩余时间规则校验
     * @param {*} rule
     * @param {*} value
     * @param {*} callback
     * @return {*} 提示
     */
    const checkNum = async (rule, value, callback) => {
      const { lv1, lv2, lv3 } = this.ruleForm
      if (lv3 && lv2 && lv1) {
        return +lv3 > +lv2 && +lv2 > +lv1
          ? callback()
          : callback(new Error('剩余时间需红 < 橙 < 黄'))
      } else if (lv3 && lv2) {
        return +lv3 > +lv2
          ? callback()
          : callback(new Error('剩余时间需橙 < 黄'))
      } else if (lv3 && lv1) {
        return +lv3 > +lv1
          ? callback()
          : callback(new Error('剩余时间需红 < 黄'))
      } else if (lv2 && lv1) {
        return +lv2 > +lv1
          ? callback()
          : callback(new Error('剩余时间需红 < 橙 '))
      }
    }
    return {
      title: '',
      ruleForm: {
        lv1: '',
        lv2: '',
        lv3: ''
      },
      rules: {
        lv1: [
          { required: false },
          {
            pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)?$/,
            message: '时间必须为正整数！',
            trigger: 'blur'
          },
          { validator: checkNum, trigger: 'blur' }
        ],
        lv2: [
          { required: false },
          {
            pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)?$/,
            message: '时间必须为正整数！',
            trigger: 'blur'
          },
          { validator: checkNum, trigger: 'blur' }
        ],
        lv3: [
          { required: false },
          {
            pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)?$/,
            message: '时间必须为正整数！',
            trigger: 'blur'
          },
          { validator: checkNum, trigger: 'blur' }
        ]
      },
      dialogVisible: false
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 展开弹窗 获取上一次预警设置的内容
     */
    async showDialog() {
      this.dialogVisible = true
      this.getLevelTime()
    },
    /**
     * @description:  获取预警级别时间
     */
    async getLevelTime() {
      const res = await this.$axios.get('/equip/point/check/getWarning')
      if (res && res.data.code === 200) {
        this.ruleForm = res.data.data
      }
    },
    /**
     * @description : 提交表单
     */
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await this.$axios.post(
            '/equip/point/check/saveWarning',
            this.ruleForm
          )
          if (res && res.data.code === 200) {
            this.$emit('getLevelTime')
            this.$nextTick(() => {
              this.$emit('getTableInfo')
            })
            this.dialogVisible = false
          }
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.el-form {
  .el-input {
    width: 80%;
  }
  .colorBox {
    width: 18%;
    margin-left: 1%;
    height: 28px;
    border-radius: 3px;
    float: right;
  }
}
.title {
  line-height: 28px;
  .titleName {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 0 10px;
  }
  .colorBoxEX {
    width: 40px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
  }
}
.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.yellow {
  background-color: yellow;
}
</style>
